<template>
  <a-modal
    v-model:visible="visible"
    title="你想发布什么类型"
    @ok="submit(formState)"
    :okButtonProps="okButtonProps"
  >
    <a-form layout="vertical" :model="formState">
      <a-form-item v-bind="validateInfos.title">
        <a-input v-model:value="formState.title" placeholder="标题">
          <template #prefix>
            <FormOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input v-model:value="formState.synopsis" placeholder="简介">
          <template #prefix>
            <ContainerOutlined />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item>
        类型：
        <a-radio-group v-model:value="formState.type">
          <a-radio value="日记">日记</a-radio>
          <a-radio value="随笔">随笔</a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { Modal, Radio } from "ant-design-vue";
import { FormOutlined, ContainerOutlined } from "@ant-design/icons-vue";
import { useState } from "@u/hooks.js";
import { computed, reactive } from "vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;
export default {
  components: {
    AModal: Modal,
    FormOutlined,
    ContainerOutlined,
    ARadio: Radio,
    ARadioGroup: Radio.Group,
  },
  setup(props, { emit }) {
    const [visible, setVisible] = useState(false);

    const formState = reactive({
      title: "",
      synopsis: "",
      type: "日记",
    });

    const rules = reactive({
      title: [
        {
          required: true,
          message: "标题为必填",
        },
      ],
    });

    const { validateInfos } = useForm(formState, rules);

    const okButtonProps = reactive({
      disabled: true,
      loading: false,
    });

    okButtonProps.disabled = computed(() => {
      const { validateStatus } = validateInfos.title;
      const status = validateStatus === "success";
      return !status;
    });

    const submit = (state) => {
      emit("submit", state);
    };
    return {
      visible,
      setVisible,
      formState,
      submit,
      validateInfos,
      okButtonProps,
    };
  },
};
</script>

<style>
</style>